<template>
  <div class="retrieve">
    <div>
      <div class="container border" :style="{width: conWidth}" >
        <div class="tip-div">
          <div class="man-container" v-for="item in retrieveMans[rId]">
            <span :title="item.name">{{item.name}}</span>
            <i class="iconfont icon-x" @click="deleteMan(item)" v-if="isShowIcon(item) && !disabled"></i>
          </div>
        </div>
      </div>
      <i class="iconfont icon-plus" @click="show" v-if="!disabled"></i>
    </div>

    <zz-dialog
      title= '请选择项目成员'
      :visible = visible
      @close="close"
      :showFoot=false>
      <slot>
        <!--搜索-->
        <zz-search
          :width= "496"
          searchType= ''
          holder='输入帐号/手机号码/用户名'
          @searchClick="searchCallBack"></zz-search>
        <div class="retrieve-mans">

          <div  class="company-re-list clear">

            <!--公司列表-->
            <div v-bar class="left" style="width: 250px; margin: 10px">
              <zz-constructProject
                :showSelect="true"
                :projectName="projectName"
                :pjId = "projectId"
                @projectOrganize="projectOrganize"
                @projectOrganizeChild="projectOrganizeChild"
                @ProjectTeam="projectTeam"></zz-constructProject>
            </div>

            <!--某个部门成员-->
            <div v-bar class="left" style="border-right: 0;">
              <div>
                <div
                  class="company-man"
                  v-for="item in employees"
                  @click="mansCallBack(item)">{{item.mName}}
                  <small v-if="item.departmentName">-{{item.departmentName}}</small></div>
              </div>
            </div>

            <!--<div class="left unEmployees">-->
              <!--<p><i class="iconfont icon-warning"></i>无员工</p>-->
            <!--</div>-->

          </div>
        </div>
      </slot>
    </zz-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'zz-projectRetrieve',
    computed: {
      ...mapGetters({
        retrieveMans: 'getRetrieveMans' // 已选中成员列表
      })
    },
    data () {
      return {
        visible: false,
        workers: [],
        employees: [],
        menuWidth: '',
        viewType: 1,
        currentPage: 1,
        searchName: '',
        retrieveType: [],
        options: {
          halfCheckedStatus: true // 控制父框是否需要半钩状态
        }
      }
    },
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'choose'
      },
      title: {
        type: String,
        default: '选择人员'
      },
      conWidth: {
        type: String,
        default: '686px'
      },
      // 是否开启选择多个
      multiple: {
        type: Boolean,
        default: true
      },
      // 是否开启选择多个
      disabled: {
        type: Boolean,
        default: false
      },
      singleCheck: {
        type: Boolean,
        default: false
      },
      rId: {
        type: String,
        default: 'projectRetrieve'
      },
      projectName: {
        type: String,
        default: ''
      },
      projectId: {
        type: String | Number,
        default: ''
      }
    },
    watch: {
      isShow (value) {
        if (value) {
          this.show()
        } else {
          this.close()
        }
      }
    },
    methods: {
      // 弹出选择框
      show () {
        this.visible = true
      },

      // 关闭选择框
      close () {
        this.visible = false
        this.$emit('close')
        this.friendList = []
      },

      // 搜索回调
      searchCallBack (data) {
        this.searchName = data
        this.query()
      },

      query () {
        const data = {
          'constructionProjectManQuery.project_id': this.projectId,
          'constructionProjectManQuery.stage_id': this.stageId,
          'constructionProjectManQuery.section_id': this.sectionId,
          'constructionProjectManQuery.member_name': this.searchName,
          'constructionProjectManQuery.currentPage': this.currentPage,
          'constructionProjectManQuery.pageSize': 1000,
          'constructionProjectManQuery.source': this.source
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.projectServer}/front/person/findQueryPagrProjectMan.htm`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            if (res.data.list.dataList) {
              this.employees = res.data.list.dataList
            } else {
              this.employees = []
            }
          }
        })
      },
      projectOrganize (node) {
        this.stageId = node.stageId
        this.sectionId = ''
        this.source = ''
        this.query()
      },
      projectOrganizeChild (node) {
        this.stageId = node.stageId
        this.sectionId = node.section_id
        this.source = node.source
        this.query()
      },
      projectTeam (node) {
        this.source = node.source
        this.stageId = ''
        this.sectionId = ''
        this.query()
      },

      // 设置工人
      setWorkers (workers) {
        this.workers = workers
      },

      // 选择班组 || 部门
      itemDepartClick (item) {
        if (this.type === 'click' || this.type === 'other') {
          this.clickHanled(item)
          return
        }
        this.chooseHandler(item)
        const node = {
          mid: item.id,
          mName: item.name,
          isDepart: true
        }
        this.$store.dispatch({
          type: 'actRetrieveMans',
          data: node,
          rId: this.rId,
          multiple: this.multiple
        })
        if (this.singleCheck) {
          this.close()
        }
      },
      chooseHandler (node) {
        this.$emit('chooseCallBack', node)
      },
      itemCompanyClick (item) {
        if (this.type === 'click') {
          this.clickHanled(item)
          return
        }
        const node = {
          mid: '',
          mName: '全公司',
          isCompany: true
        }
        this.$store.dispatch({
          type: 'actRetrieveMans',
          data: node,
          rId: this.rId,
          multiple: this.multiple
        })
      },
      // 选择人员
      mansCallBack (node) {
        if (this.type === 'click' || this.type === 'text' || this.type === 'other') {
          this.clickHanled(node)
        }
        this.$store.dispatch({
          type: 'actRetrieveMans',
          data: node,
          rId: this.rId,
          multiple: this.multiple
        }).then(() => {
          this.$emit('dispatchCallBack', node)
        })
        if (this.singleCheck) {
          this.close()
        }
      },
      // 选中人员直接触发事件
      clickHanled (node) {
        this.$emit('clickCallBack', node)
      },
      // 删除选中人员
      deleteMan (node) {
        this.$store.dispatch({
          type: 'delRetrieveMans',
          data: node.mid,
          rId: this.rId
        })
        this.$emit('delMan')
      },
      isShowIcon (item) {
        if (item.dStatus) {
          if (item.dStatus === 13 || item.dStatus === 14) {
            return false
          }
        }
        return true
      }
    }
  }
</script>

<style lang="scss">
  .retrieve{
    position: relative;
    vertical-align: top;
    .border{
      border: 1px $color-line solid;
    }
    .container{
      font-size: $font-size-small;
      padding: 3px 10px 3px 10px;
      line-height: 22px;
      min-height: 22px;
      border-radius: 3px;
      box-sizing: border-box;
      >div{
        min-height: 22px;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        .man-container{
          height: 20px;
          width: 70px;
          background: $color-hover;
          border: 1px $color solid;
          line-height: 20px;
          color: #fff;
          text-align: center;
          display: inline-block;
          vertical-align: top;
          margin-right: 5px;
          span{
            font-size: $font-size-smallest;
            display: inline-block;
            width:49px;
            @include ellipsis
          }
          .icon-x{
            font-size: $font-size-smallest;
            display: inline-block;
            vertical-align: super;
            cursor: pointer;
            &:hover{
              color: red;
            }
          }
        }
      }
      .tip-div{
        .icon-mans{
          margin-top: 2px;
          color: $color-grid;
          display: inline-block;
        }
        .tip-span{
          display: inline-block;
        }
      }
      .retrieve-input{
        @include input-n(105px);
        font-size: $font-size-smallest;
      }
    }
    .retrieve-mans{
      margin-top: 12px;
      border: 1px $color-line solid;
      font-size: $font-size-smallest;
      .mans-menu{
        height: 30px;
        line-height: 30px;
        color: $color-grid;
        font-size: $font-size-smallest;
        border-bottom: $color-line 1px solid;
        >div {
          display: inline-block;
          vertical-align: top;
          text-align: center;
          cursor: pointer;
          &:hover{
            color: $color;
          }
        }
        .hover{
          color: $color;
        }
      }
      .company-re-list{
        >div{
          height: 325px;
          width: 223px;
          border-right: 1px $color-line solid;
          &:last-child{
            border-right: 0;
          }
          .hover{
            color: $color;
          }
        }
        .unEmployees{
          text-align: center;
          .icon-warning{
            color: $color;
            margin-right: 10px;
          }
        }
      }
      .company-man{
        font-size: $font-size-smallest;
        cursor: pointer;
        width: 100%;
        padding-left: 10px;
        line-height: 24px;
        @include ellipsis;
        &:hover{
          color: $color;
        }
      }
      .full-width{
        width: 457px !important;
      }
    }
    .icon-plus{
      position: absolute;
      right: 8px;
      top: 7px;
      cursor: pointer;
      color: $color-grid;
      &:hover{
        color: $color-hover;
      }
    }
    .retrieve-click{
      border: 1px dashed $color-line;
      width: 40px;
      height: 40px;
      position: relative;
      text-align: center;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      &:hover{
        border: 1px dashed $color;
        .icon-plus{
          color: $color;
        }
      }
      .icon-plus{
        font-size: 22px;
        color: $color-grid;
      }
    }
    .retrieve-input{
      height: 28px;
    }
  }
</style>
